<template>
    <view class="selectDate">
        <view class="all" :class="selectTimestyle=='all'? 'selectStyletime':''" @click="getAlldoctor">
            全部
        </view>
        <view class="timePart">
            <scroll-view :scroll-x="true">
                <view class="dataItem">
                    <view v-for="(item,index) in dates" :key="index"
                        :class="selectTimestyle==index ? 'selectStyletime' : '' " @click="getDoctor(index,item.week)">
                        <text>{{item.date}}</text>
                        <text>{{item.week}}</text>
                        <text>{{item.nu_source?'有号':'无号'}}</text>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
    <view class="doctor" v-for="(item,index) in doctors" :key="index">
        <image :src="item.avatar" mode="aspectFill"></image>
        <view class="doctorDetail">
            <text class="name">{{item.name}}</text>
            <text>{{item.post}}</text>
            <text>{{item.good_at}}</text>
        </view>
        <view class="btn" @click="toAppoment(item._id)">预约</view>
    </view>
    <point :show="show" title="暂无医生排班"></point>
</template>
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import requestApi from '@/public/request'
import { ref } from 'vue';
import { Doctorlist, Doctortime } from '@/public/decl-type';
import point from '@/pages/common/point.vue'
let id = ref<string>('');
let dates = ref<Doctortime[]>([]);
let selectTimestyle = ref<any>('all');
let show = ref<boolean>(false)
interface resData {
    data: {
        data: Doctorlist[]
    }
}
//医生信息
let doctors = ref<Doctorlist[]>([]);
//跳转页面到医生页面
function toAppoment(_id: string) {
    uni.navigateTo({
        url: '/pages/doctor/doctoeHomepage?_id=' + _id
    })
}
//获得全部医生 
async function getAlldoctor() {
    selectTimestyle.value = 'all'
    uni.showLoading({
        title: '请求中',
        mask: true
    })
    const res = await requestApi.AlldList({ dep_id: id.value }) as resData
    uni.hideLoading()
    doctors.value = res.data.data
    show.value = doctors.value.length > 0 ? false : true
}
//根据日期获取对应医生
async function getDoctor(index: number, week: string) {
    selectTimestyle.value = index;
    uni.showLoading({
        title: '请求中',
        mask: true
    })
    const res = await requestApi.EverydList({ dep_id: id.value, week }) as resData;
    uni.hideLoading();
    doctors.value = res.data.data
    show.value = doctors.value.length > 0 ? false : true
}
onLoad((data: any) => {
    id.value = data.id;
    //获取日期
    requestApi.TimeSele({ dep_id: id.value }).then((res: any) => {
        dates.value = res.data.data;

    })
    getAlldoctor()//先获得所有医生
})
</script>
<style lang="scss">
page {
    background-color: #f7f7f7;
}

.selectStyletime {
    background-color: #0176ff;
    color: #ffffff;
}

.selectDate {
    background-color: #ffffff;

    .all {
        position: fixed;
        top: 0;
        left: 0;
        height: 150rpx;
        width: 100rpx;
        line-height: 150rpx;
        text-align: center;
        border-right: 1rpx solid #f2f2f2;
        border-right: 1rpx solid #f2f2f2;
    }

}

.timePart {
    background-color: #ffffff;
    height: 150rpx;
    margin-left: 100rpx;

    .dataItem {
        display: flex;
        align-items: center;
        white-space: nowrap;

        view {
            box-sizing: border-box;
            height: 150rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 15rpx 20rpx;
            align-items: center;
            border-radius: 5%;

            text {
                font-size: 25rpx;
            }
        }
    }


}

.doctor {

    margin: 0 10rpx;
    margin-top: 20rpx;
    padding: 15rpx 30rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btn {
        padding: 15rpx 25rpx;
        border: 1rpx solid #0176ff;
        color: #0176ff;
        border-radius: 20rpx;
    }

    .doctorDetail {
        flex: 1;
        margin-right: 20rpx;

        text {
            display: -webkit-box;
            /*超出隐藏*/
            overflow: hidden;
            // /*隐藏后添加省略号*/
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .name {
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 10rpx;
        }

        text:nth-of-type(n+2) {
            color: #b1b2b3;

        }



    }

    image {
        width: 150rpx;
        height: 150rpx;
        display: block;
        border-radius: 50%;
    }

}
</style>